<template>
  <view class="verification-container">
    <!-- 头部区域 -->
    <view class="header">
      <text class="header-title">输入核销码</text>
    </view>

    <!-- 主体内容区域 -->
    <view class="content">
      <!-- 输入框区域 -->
      <view class="input-section">
        <view class="input-wrapper">
          <input 
            type="text" 
            v-model="verificationCode" 
            placeholder="请输入核销码" 
            class="verification-input"
            maxlength="20"
          />
        </view>
      </view>

      <!-- 识别按钮 -->
      <view class="action-section">
        <button 
          class="verify-button" 
          @click="handleVerify"
          :disabled="!verificationCode.trim()"
        >
          识别
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 核销码数据
const verificationCode = ref('');

// 处理识别按钮点击
const handleVerify = (): void => {
  if (!verificationCode.value.trim()) {
    uni.showToast({
      title: '请输入核销码',
      icon: 'none'
    });
    return;
  }

  // 跳转到核销操作页面，并传递核销码参数
  uni.navigateTo({
    url: `/pages/verification/verification?code=${encodeURIComponent(verificationCode.value.trim())}`
  });
};
</script>

<style lang="scss" scoped>
.verification-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 头部区域 */
.header {
  background-color: #1989fa;
  padding: 60rpx 30rpx 30rpx;
  text-align: center;
  position: relative;

  .header-title {
    color: white;
    font-size: 36rpx;
    font-weight: 600;
  }
}

/* 主体内容区域 */
.content {
  flex: 1;
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 输入框区域 */
.input-section {
  width: 100%;
  margin-bottom: 60rpx;

  .input-wrapper {
    background-color: white;
    border-radius: 10rpx;
    padding: 0 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .verification-input {
      width: 100%;
      height: 100rpx;
      font-size: 32rpx;
      color: #333;
    }
  }
}

/* 识别按钮 */
.action-section {
  width: 100%;

  .verify-button {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    color: white;
    background-color: #1989fa;
    border: none;
    border-radius: 50rpx;
    font-weight: 600;

    &:disabled {
      background-color: #c8c8c8;
    }

    &:active:not(:disabled) {
      background-color: #0066cc;
    }
  }
}
</style>